<template>
  <div class="user-profile">
    <!-- 用户基本信息卡片 -->
    <el-popover
      placement="bottom-end"
      :width="300"
      trigger="click"
    >
      <template #reference>
        <div class="profile-trigger">
          <el-avatar :size="36" :src="userInfo.avatar">
            {{ userInfo.username.charAt(0).toUpperCase() }}
          </el-avatar>
          <span class="username">{{ userInfo.username }}</span>
          <el-icon><CaretBottom /></el-icon>
        </div>
      </template>
      
      <!-- 弹出的详细信息卡片 -->
      <div class="profile-card">
        <div class="profile-header">
          <el-avatar :size="60" :src="userInfo.avatar">
            {{ userInfo.username.charAt(0).toUpperCase() }}
          </el-avatar>
          <div class="user-info">
            <h3>{{ userInfo.username }}</h3>
            <p>{{ userInfo.role }}</p>
          </div>
        </div>

        <!-- 用户统计信息 -->
        <div class="stats-section">
          <div class="stats-item">
            <div class="value">{{ userInfo.loginDays }}</div>
            <div class="label">累计登录天数</div>
          </div>
          <div class="stats-item">
            <div class="value">{{ userInfo.monitorHours }}</div>
            <div class="label">监控时长(h)</div>
          </div>
          <div class="stats-item">
            <div class="value">{{ userInfo.captureCount }}</div>
            <div class="label">抓拍次数</div>
          </div>
        </div>

        <!-- 活跃度图表 -->
        <div class="activity-chart" ref="activityChartRef"></div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <el-button type="primary" @click="handleEditProfile">
            <el-icon><Edit /></el-icon>编辑资料
          </el-button>
          <el-button @click="handleLogout">
            <el-icon><SwitchButton /></el-icon>退出登录
          </el-button>
        </div>
      </div>
    </el-popover>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import { CaretBottom, Edit, SwitchButton } from '@element-plus/icons-vue'

const router = useRouter()
const activityChartRef = ref<HTMLElement>()

// 模拟用户数据
const userInfo = ref({
  username: 'Admin',
  role: '系统管理员',
  avatar: '',
  loginDays: 365,
  monitorHours: 2160,
  captureCount: 1280,
  activityData: [30, 40, 35, 50, 49, 60, 70, 45, 65, 55, 40, 45]
})

onMounted(() => {
  if (activityChartRef.value) {
    const chart = echarts.init(activityChartRef.value)
    chart.setOption({
      title: {
        text: '近12个月活跃度',
        textStyle: {
          color: '#7fdbff',
          fontSize: 12
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: 30,
        left: 0,
        right: 0,
        bottom: 0,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisLabel: {
          color: '#7fdbff',
          fontSize: 10
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(127,219,255,0.1)'
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          color: '#7fdbff',
          fontSize: 10
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(127,219,255,0.1)'
          }
        }
      },
      series: [
        {
          data: userInfo.value.activityData,
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#00e4ff' },
              { offset: 1, color: '#1890ff' }
            ])
          }
        }
      ]
    })
  }
})

const handleEditProfile = () => {
  // 处理编辑资料
  ElMessage.info('编辑资料功能开发中...')
}

const handleLogout = () => {
  localStorage.removeItem('token')
  router.push('/login')
}
</script>

<style scoped lang="scss">
.user-profile {
  .profile-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s;
    
    &:hover {
      background: rgba(0,228,255,0.1);
    }

    .username {
      color: #00e4ff;
      font-size: 14px;
    }

    .el-icon {
      color: #7fdbff;
      font-size: 12px;
    }
  }
}

.profile-card {
  padding: 16px;
  background: rgba(0,21,41,0.95);
  border-radius: 8px;

  .profile-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;

    .user-info {
      h3 {
        color: #00e4ff;
        margin: 0 0 4px;
      }

      p {
        color: #7fdbff;
        margin: 0;
        font-size: 12px;
      }
    }
  }

  .stats-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 0;
    border-top: 1px solid rgba(127,219,255,0.1);
    border-bottom: 1px solid rgba(127,219,255,0.1);

    .stats-item {
      text-align: center;

      .value {
        color: #00e4ff;
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 4px;
      }

      .label {
        color: #7fdbff;
        font-size: 12px;
      }
    }
  }

  .activity-chart {
    height: 140px;
    margin-bottom: 20px;
  }

  .action-buttons {
    display: flex;
    gap: 12px;

    .el-button {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      
      &.el-button--primary {
        background: linear-gradient(45deg, #1890ff, #00e4ff);
        border: none;
      }
    }
  }
}
</style> 